<template>
  <el-form-item :label="props.label" :props="props.itemProps">
    <el-input-number
      controls-position="right"
      min="0"
      precision="0"
      v-model="value.time"
    />
    <el-select
      :style="{ width: '100px', marginLeft: '2px' }"
      v-model="value.unit"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <slot></slot>
  </el-form-item>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";

interface Data {
  time?: number | string;
  unit?: number | string;
}
interface Props {
  label?: number | string;
  itemProps?: string;
  modelValue?: any;
}
const emits = defineEmits(["update:modelValue", "change", "click"]);
const props = defineProps<Props>();
const value = computed({
  get: () => JSON.parse(props.modelValue),
  set: (val) => {
    console.log("val", val);

    emits("update:modelValue", val);
  },
});

const options = [
  {
    value: "D",
    label: "天",
  },
  {
    value: "H",
    label: "小时",
  },
];
</script>
